export default {
  name: 'SelectMultiple',
  data () {
    return {
      search: '',
      selectValue: [],
      textValue: [],
      list : []
    }
  },
  props: {
    value: Array,
    data: {
      type: Array,
      default: () => []
    },
    width: ''
  },
  watch: {
    data: {
      handler(val) {
        this.list = val
      },
      deep: true
    },
    selectValue: {
      handler(val) {
        this.textValue = val
      },
      deep: true
    },
    value: {
      handler(val) {
        this.textValue = val
      },
      deep: true
    }
  },
  methods: {
    getList () {
      this.$refs.multipleTable.clearSelection();
      for (let i =0; i< this.value.length;i++){
        this.$refs.multipleTable.toggleRowSelection(this.value[i], true);
      }
    },
    handleRowClick (row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    handleSelectionChange (val) {
      this.selectValue = val
      this.$emit('onSetValue', val)
    },
    handleCheckAllChange () {
      this.$refs.multipleTable.toggleAllSelection();
    },
    handleCheckClearChange () {
      this.$refs.multipleTable.clearSelection();
    },
    onDelete (item) {
      for (const key in this.selectValue) {
        if (this.selectValue[key] === item) {
          this.$refs.multipleTable.toggleRowSelection(this.selectValue[key], false);
          break
        }
      }
      this.$emit('onSetValue', this.selectValue)
    }
  }
}
